<!doctype html>
<html>
<head>
    <title>List tests</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../test.js"></script>

    <style>
        li {
            margin: 10px 5%;
        }
        .list1 {
            list-style-type: circle;
        }

        .list2 {
            list-style-image: url(../../assets/image.jpg);
        }

        .list3 {
            list-style-image: linear-gradient(60deg, deeppink, aquamarine);
            list-style-position: inside;
        }

        .list4 {
        }

        .list5 {
            list-style-type: lower-roman;
        }

        .list6 {
            list-style-type: hiragana;
        }

        .list7 {
            list-style-type: simp-chinese-informal;
        }

        .list8 {
            list-style-type: lower-roman;
        }

        .list8 li {
            display: block;
        }

        .list9 {
            display: list-item;
            list-style-type: lower-alpha;
            margin: 10px;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
<ul class="list1">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ul>
<ul class="list2">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ul>
<ul class="list3">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ul>
<ol class="list4" start="-1">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ol>
<ol class="list5">
    <li>Alpha</li>
    <li value="5">Beta</li>
    <li>Gamma</li>
</ol>
<ol class="list6">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ol>
<ol class="list7">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ol>
<ol class="list8">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ol>
<div class="list9">list-less Alpha</div>
<div class="list9">list-less Beta</div>
<div class="list9">list-less Gamma</div>
</body>
</html>
